<template>
  <div id="MsgCenter">
    <H1>
      <template v-slot:title>基础设置</template>
    </H1>
    <div class="card">
      <el-card :body-style="{ padding: '0px' }" shadow="hover">
        <div class="group">
          <img src="/img/shejizu.png" alt="加载错误！" style="margin-right: 20px">
          <div class="text">
            <h4 style="font-weight: bold">设计组</h4>
            <p style="color: #b3b3b3">我们的团队OUR TEAM</p>
            <p>暂无消息</p>
          </div>
        </div>
        <div class="Member">
          <el-avatar shape="square" :size="100" :fit="1111" :src="url"/>
          <span>共16人</span>
        </div>
        <el-space id="space" :size="size" :spacer="spacer">
          <el-button link icon="ChatLineRound">发信息</el-button>
          <el-button link icon="Message">发文件</el-button>
        </el-space>
      </el-card>
      <el-card :body-style="{ padding: '0px' }" shadow="hover">
        <div class="group">
          <img src="/img/kaifazu.png" alt="加载错误！" style="margin-right: 20px">
          <div class="text">
            <h4 style="font-weight: bold">开发组</h4>
            <p style="color: #b3b3b3">我们的团队OUR TEAM</p>
            <p>暂无消息</p>
          </div>
        </div>
        <div class="Member">
          <el-avatar shape="square" :size="100" :fit="1111" :src="url"/>
          <span>共16人</span>
        </div>
        <el-space id="space" :size="size" :spacer="spacer">
          <el-button link icon="ChatLineRound">发信息</el-button>
          <el-button link icon="Message">发文件</el-button>
        </el-space>
      </el-card>
      <el-card :body-style="{ padding: '0px' }" shadow="hover">
        <div class="group">
          <img src="/img/shenhezu.png" alt="加载错误！" style="margin-right: 20px">
          <div class="text">
            <h4 style="font-weight: bold">审核组</h4>
            <p style="color: #b3b3b3">我们的团队OUR TEAM</p>
            <p>暂无消息</p>
          </div>
        </div>
        <div class="Member">
          <el-avatar shape="square" :size="100" :fit="1111" :src="url"/>
          <span>共16人</span>
        </div>
        <el-space id="space" :size="size" :spacer="spacer">
          <el-button link icon="ChatLineRound">发信息</el-button>
          <el-button link icon="Message">发文件</el-button>
        </el-space>
      </el-card>
    </div>
    <div class="MsgList">
      <h3 style="font-size: 20px;padding-left: 20px;border-left: 5px solid #d83030;margin-left: 10px">我的消息</h3>
      <div class="list">
        <div class="item" >
          <div class="picAndText" style="display: flex;align-items: center">
            <img src="/img/personnel1.png" alt="图片加载失败！">
            <div class="text">
              <p>李丁丁</p>
              <p>嗯嗯，收到了</p>
            </div>
          </div>
          <p style="margin-right: 20px;font-size: 14px">1分钟前</p>
        </div>
        <el-divider border-style="dotted"/>
        <div class="item">
          <div class="picAndText" style="display: flex;align-items: center">
            <img src="/img/personnel2.png" alt="图片加载失败！">
            <div class="text">
              <p>李子薇</p>
              <p>置顶的评论是指在App Store应用详情页面直接显示的评论</p>
            </div>
          </div>
          <p style="margin-right: 20px;font-size: 14px">1分钟前</p>
        </div>
        <el-divider border-style="double"/>
        <div class="item">
          <div class="picAndText" style="display: flex;align-items: center">
            <img src="/img/personnel3.png" alt="图片加载失败！">
            <div class="text">
              <p>白小白</p>
              <p>其他评论需在App Store点击“查看全部”才能查看...</p>
            </div>
          </div>
          <p style="margin-right: 20px;font-size: 14px">1分钟前</p>
        </div>
        <el-divider border-style="double"/>
        <div class="item">
          <div class="picAndText" style="display: flex;align-items: center">
            <img src="/img/personnel4.png" alt="图片加载失败！">
            <div class="text">
              <p>李璐</p>
              <p>给我发一下文件</p>
            </div>
          </div>
          <p style="margin-right: 20px;font-size: 14px">1分钟前</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {reactive, toRefs, h, ref} from "vue";
import {ElDivider} from 'element-plus'
import H1 from "../H1.vue";

const state = reactive({
  url: '/image/personnel.png',
})
const {url} = toRefs(state)
const size = ref(10)
const spacer = h(ElDivider, {direction: 'vertical'})
</script>

<style lang="scss" scoped>
::v-deep(.el-avatar) {
  width: 170px;
  height: 50px;
  margin: 5% 10% 5% 10%;
}
//隐藏滚动条样式
::-webkit-scrollbar {
  width: 0;
  height: 8px;
}
.ant-table-wrapper {
  height: 500px;
  overflow-y: scroll;
}
#MsgCenter {
  .card {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 96%;
    margin: 2%;

    .group {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 20px 0 40px 0;
      margin: 0 40px;
      border-bottom: 1px solid #ddd;

      p {
        margin-top: 10px;
      }
    }

    .icon {
      span {
        margin: 0 5px;
      }
    }

    .Member {
      display: flex;
      align-items: center;

      span {
        color: gray;
        font-size: 14px;
      }
    }

    #space {
      width: 100%;
      height: 70px;
      background-color: #fafafa;
      display: flex;
      justify-content: space-evenly;
    }
  }

  .MsgList {
    width: 100%;
    margin: 2% 0;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 1px 2px 1px #ddd;
    padding: 15px 0 0;

    .list {
      margin: 30px 0 0 20px;
      height: 250px;
      overflow-y: scroll;
      .item {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .text {
          margin-left: 20px;
          font-size: 14px;
          color: gray;
        }
      }
    }
  }
}
::v-deep .el-divider--horizontal{
  margin: 6px 0;
}
</style>
